<template>
  <div>
    <!-- 按钮组/搜索框 -->
    <zx-btn-group>
      <zx-btn @click="openModal" size="is-small" :round="true" type="success">新增</zx-btn>
      <zx-btn @click="orderData" size="is-small" :round="true" type="warning">{{isDesc?'降序排列':'升序排列'}}</zx-btn>
      <zx-btn @click="delCheckbox" size="is-small" :round="true" type="danger">批量删除</zx-btn>
    </zx-btn-group>
    <div class="field has-addons" style="position:absolute;top:24px;right:24px;">
      <div class="control">
        <input
          class="input is-rounded"
          @keyup.enter="searchFun"
          type="text"
          v-model="search"
          placeholder="按照用户名查询"
        />
      </div>
      <div class="control">
        <zx-btn @click="searchFun"  :round="true" type="info">搜索</zx-btn>
      </div>
    </div>
    <!-- 按钮组/搜索框 -->

    <!-- 表格 API:列头/表格数据/按钮组事件(从0开始，按照索引)/多选框点击事件 -->
    <zx-table :columns="tableRow" :data="tableData" @selectChange="selectChange" />
    <!-- 表格 -->

    <!-- 分页 API:当前页/每页显示几条/总条数/翻页事件 -->
    <zx-page
      :curP="curP"
      :pageSize="pageSize"
      :pageSizeArr="pageSizeArr"
      :total="total"
      @pageChange="pageChange"
      @pageSizeChange="pageSizeChange"
    />
    <!-- 分页 -->

    <!-- 模态框 API：插槽（头/身/尾） -->
    <zx-modal v-show="showModal">
      <template #header>
        <p class="modal-card-title">{{isAdd?'新增':'修改'}}用户信息</p>
        <button @click="closeModal" class="delete" aria-label="close"></button>
      </template>
      <template #default>
        <div class="field has-addons" style="flex-basis:50%;align-items: center;">
          <label style="flex-basis:28%;" class="label">姓名：</label>
          <input v-model="formData.username" name="username" class="input" type="text" />
        </div>
        <div class="field has-addons" style="flex-basis:50%;align-items: center;">
          <label style="flex-basis:28%;" class="label">年龄：</label>
          <input v-model="formData.age" name="age" class="input" type="number" />
        </div>
        <div class="field has-addons" style="flex-basis:50%;align-items: center;">
          <label style="flex-basis:28%;" class="label">性别：</label>
          <div class="control">
            <label class="radio">
              <input v-model="formData.gender" value="男" type="radio" name="gender" />
              男
            </label>
            <label class="radio">
              <input v-model="formData.gender" value="女" type="radio" name="gender" />
              女
            </label>
          </div>
        </div>
        <div class="field has-addons" style="flex-basis:50%;align-items: center;">
          <label style="flex-basis:28%;" class="label">学历：</label>
          <div class="select">
            <select v-model="formData.edu" name="edu">
              <option value="0">请选择</option>
              <option value="托儿所">托儿所</option>
              <option value="幼儿园">幼儿园</option>
              <option value="学前班">学前班</option>
            </select>
          </div>
        </div>
        <div class="field has-addons" style="flex-basis:50%;align-items: center;">
          <label style="flex-basis:28%;" class="label">电话：</label>
          <input v-model="formData.mobile" name="mobile" class="input" type="number" />
        </div>
        <div class="field has-addons" style="flex-basis:50%;align-items: center;">
          <label style="flex-basis:28%;" class="label">地址：</label>
          <input v-model="formData.address" name="address" class="input" type="text" />
        </div>
        <div class="field has-addons" style="flex-basis:50%;align-items: center;">
          <label style="flex-basis:28%;" class="label">爱好：</label>
          <label class="checkbox">
            <input v-model="formData.hobbies" value="唱" name="hobbies[]" type="checkbox" />
            唱
          </label>
          <label class="checkbox">
            <input v-model="formData.hobbies" value="跳" name="hobbies[]" type="checkbox" />
            跳
          </label>
          <label class="checkbox">
            <input v-model="formData.hobbies" value="Rap" name="hobbies[]" type="checkbox" />
            Rap
          </label>
          <label class="checkbox">
            <input v-model="formData.hobbies" value="篮球" name="hobbies[]" type="checkbox" />
            篮球
          </label>
        </div>
      </template>
      <template v-slot:footer>
        <zx-btn @click="submitForm" type="success">{{isAdd?'新增':'修改'}}</zx-btn>
        <zx-btn @click="closeModal">取消</zx-btn>
      </template>
    </zx-modal>
    <!-- 模态框 -->
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
import { usersUrl } from "../utils/url.js";
import ZxBtn from "../uiComps/ZxBtn.vue";
import ZxBtnGroup from "../uiComps/ZxBtnGroup.vue";
import Modal from "../uiComps/Modal.vue";
import ZxTable from "../uiComps/ZxTable.vue";
import Page from "../uiComps/Page.vue";
export default {
  data() {
    return {
      tableRow: [
        { type: "selection", width: 60, align: "center" },
        { type: "index", width: 60, align: "center" },
        { title: "姓名", key: "username", width: 80 },
        { title: "年龄", key: "age", width: 80, sort: "sort" },
        { title: "性别", key: "gender", align: "center" },
        { title: "学历", key: "edu", width: 80 },
        { title: "电话", key: "mobile", sort: "sort" },
        { title: "地址", key: "address" },
        { title: "爱好", key: "hobbies" },
        {
          type: "action",
          btns: [
            {
              name: "修改",
              type: "warning",
              size:'is-small',
              click: row => {
                this.changeData(row);
              }
            },
            {
              name: "删除",
              type: "danger",
              size:'is-small',
              click: row => {
                this.deleteData(row);
              }
            },
            {
              name: "查看",
              type: "info",
              size:'is-small',
              click: row => {
                console.log("查看:", row);
              }
            }
          ]
        }
      ],
      tableData: [],
      showModal: false,
      isAdd: true,
      formData: {
        hobbies: []
      },
      search: "",
      delId: "",
      curP: 1,
      pageSize: 5,
      pageSizeArr: [1, 2, 3, 5],
      total: 1,
      order: "desc",
      isDesc: true
    };
  },
  watch: {
    total() {
      let totalNum = Math.ceil(this.total / this.pageSize);
      this.curP > totalNum ? (this.curP = totalNum) : null;
    },
    curP() {
      this.getData();
    }
  },
  methods: {
    orderData() {
      this.isDesc = !this.isDesc;
      this.order = this.isDesc ? "desc" : "asc";
      this.getData();
    },
    openModal() {
      this.showModal = true;
      this.formData = {
        hobbies: []
      };
    },
    closeModal() {
      this.showModal = false;
      this.isAdd = true;
    },
    submitForm() {
      if (!this.formData.username) {
        alert("用户名不能为空");
        return;
      }
      axios({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        url: usersUrl,
        method: "post",
        data: qs.stringify(this.formData)
      }).then(res => {
        this.getData();
      });
      this.closeModal();
    },
    changeData(item) {
      this.openModal();
      this.isAdd = false;
      this.formData = { ...item };
      this.formData.hobbies = this.formData.hobbies
        .split(",")
        .filter(item => item != "");
    },
    deleteData(item) {
      if (confirm("确定要删除吗")) {
        this.delId = item.id;
        this.getData(this.delId);
        this.delId = "";
      }
    },
    delCheckbox() {
      if (this.delId == "") {
        return;
      }
      if (confirm("确定要删除吗")) {
        this.getData(this.delId);
        this.delId = "";
      }
    },
    selectChange(arr) {
      let ids = [];
      arr.forEach(item => {
        ids.push(item.id);
      });
      this.delId = ids.join(",");
    },
    searchFun() {
      this.curP = 1;
      this.getData();
    },
    getData(id) {
      this.$loading.show()
      axios({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        url: usersUrl,
        method: "get",
        params: {
          search: this.search,
          id,
          page: this.curP,
          pageSize: this.pageSize,
          order: this.order
        }
      }).then(res => {
        // console.log(res.data);
        this.tableData = res.data.data;
        this.total = res.data.total * 1;
        this.$loading.hide()
      });
    },
    pageChange(p) {
      this.curP = p;
      this.getData();
    },
    pageSizeChange(curSize) {
      this.pageSize = curSize;
      this.getData();
    }
  },
  mounted() {
    this.getData();
  },
  components: {
    "zx-modal": Modal,
    "zx-table": ZxTable,
    "zx-page": Page,
    ZxBtn,
    ZxBtnGroup
  }
};
</script>

<style>
</style>
